<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>MBDS Indicator Sharing</title>	
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta http-equiv="imagetoolbar" content="no" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="css/easy.css" media="screen" />
	<link rel="stylesheet" href="css/easyprint.css" media="print" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/easy.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
	<script type="text/javascript" src="js/openlayers_piecharts_geojson_google_chart.js"></script>		
</head>
<body onload="init();">

<div id="container">

	<div id="header">
		<img class="right top" src="images/instedd_logo.png"/>
		<h1><a href="http://easyframework.com" title="click here to return to the homepage">MBDS Indicator Sharing</a></h1>
		
		<ul id="nav">
			<li><a href="http://easyframework.com">Home</a></li>
			<li><a href="#">Report</a></li>
		</ul>
		
	</div>

	<div class="content">

		<div class="main">			
			<div id="olmap"></div>
			<div id="info"></div>
		</div>
		
		<div class="secondary">
			<fieldset>
				<legend>Diseases</legend>
				<div>
					<label><input type="checkbox" value="checked"/>Malaria</label>
					<label><input type="checkbox" value="checked"/>Pneumonia</label>
					<label><input type="checkbox" value="checked"/>Dengue fever</label>
					<label><input type="checkbox"/>Typhoid fever</label>
					<label><input type="checkbox" value="checked"/>Measles</label>
					<label><input type="checkbox"/>Tuberculosis</label>
					<label><input type="checkbox"/>HIV/AIDs</label>
					<label><input type="checkbox"/>Cholera/Severe Diarrhea</label>
					<label><input type="checkbox"/>SARS</label>
					<label><input type="checkbox"/>AFP</label>
				</div>
			</fieldset>
		</div>	
		
		<div class="tertiary">

		  <script type="text/javascript">
		    google.load('visualization', '1', {packages: ['annotatedtimeline']});
		    function drawVisualization() {
		      var data = new google.visualization.DataTable();
		      data.addColumn('date', 'Date');
		      data.addColumn('number', 'Malaria');
		      data.addColumn('number', 'Pneumonia');
		      data.addColumn('number', 'Dengue fever');
		      data.addColumn('number', 'Measles');
		      data.addRows(6);
		      data.setValue(0, 0, new Date(2010, 1 ,1));
		      data.setValue(0, 1, 2);
		      data.setValue(0, 2, 3);
		   	  data.setValue(0, 3, 17);
		   	  data.setValue(0, 4, 16);
		      data.setValue(1, 0, new Date(2010, 2 ,1));
		      data.setValue(1, 1, 12);
		      data.setValue(1, 2, 7);
		      data.setValue(1, 3, 5); 
		      data.setValue(1, 4, 10);
		      data.setValue(2, 0, new Date(2010, 3 ,1));
		      data.setValue(2, 1, 13);
		      data.setValue(2, 2, 1);
		      data.setValue(2, 3, 6);
		      data.setValue(2, 4, 19);
		      data.setValue(3, 0, new Date(2010, 4 ,1));
		      data.setValue(3, 1, 4);
		      data.setValue(3, 2, 18);
		      data.setValue(3, 3, 9);
		      data.setValue(3, 4, 20);
		      data.setValue(4, 0, new Date(2010, 5 ,1));
		      data.setValue(4, 1, 15);
		      data.setValue(4, 2, 11);
		      data.setValue(4, 3, 8);
		      data.setValue(4, 4, 14);
		      data.setValue(5, 0, new Date(2010, 6 ,1));
		      data.setValue(5, 1, 4);
		      data.setValue(5, 2, 3);
		      data.setValue(5, 3, 8);
		      data.setValue(5, 4, 6);
		      
		      var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
		          document.getElementById('visualization'));
		      annotatedtimeline.draw(data, {'displayAnnotations': true});
		    }
		    
		    google.setOnLoadCallback(drawVisualization);
		  </script>
		<div id="visualization" style="width: 1024px; height: 200px;"></div>
		​
		
		</div>		
	
	</div>	
	
	<div id="footer">
		<p>Powered by <a href="http://www.instedd.org">InSTEDD</a></p>
	</div>

</div>

</body>
</html>